<template>
  <div>
      <button @click="isShow = !isShow" class="jk">显示/隐藏</button>
      <transition name="hello" appear>
        <h1 v-show="isShow">你好啊</h1>
      </transition>
  </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:'true'
            }
        },
    }
</script>

<style scoped>
    .jk{
        background-color: rgb(230, 17, 45);
    }

    h1{
        background-color: rgb(173, 238, 211);
    }
    
    .hello-enter-active{
        animation: atguigu 1s;
    }

    .hello-leave-active{
        animation: atguigu 1s reverse;
    }

    @keyframes atguigu{
        from{
            transform: translateX(-100px);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>